<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .banner{
            position: relative;
            width: 1226px;
            height: 460px;
            margin: 100px auto;
            overflow: hidden;
        }
        .banner .wrapper-all{
            position: absolute;
            top: 0;
            left: -1226px;
            height: 100%;
            width: 700%;
        }
        .banner .wrapper-all .img-wrapper{
            float: left;
            height: 100%;
            width: 1226px;
        }
        img{
            width: 100%;
            height: 100%;
        }
        .to-img{
            position: absolute;
            top: 50%;
            left: 0;
            width: 60px;
            height: 120px;
            margin-top: -60px;
            font-size: 45px;
            text-decoration: none;
            color: #000;
            background-color: rgba(0, 0, 0, 0.2);
            line-height: 120px;
            text-align: center;
        }
        .banner .to-next{
            left: auto;
            right: 0;
        }
        .to-img:hover{
            background-color: rgba(0, 0, 0, .7);
            color: #fff;
        }
        .banner .point-wrapper{
            position: absolute;
            bottom: 50px;
            right: 80px;
        }
        .banner .point-wrapper .point{
            float: left;
            width: 15px;
            height: 15px;
            background-color: green;
            border-radius: 50%;
            margin-left: 15px;
            cursor: pointer;
        }
        .banner .point-wrapper .point.active{
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <div class="banner">
        <ul class="wrapper-all">
            <li class="img-wrapper"><img src="m5.jpg" alt=""></li>
            <li class="img-wrapper"><img src="m1.jpg" alt=""></li>
            <li class="img-wrapper"><img src="m2.jpg" alt=""></li>
            <li class="img-wrapper"><img src="m3.jpg" alt=""></li>
            <li class="img-wrapper"><img src="m4.jpg" alt=""></li>
            <li class="img-wrapper"><img src="m5.jpg" alt=""></li>
            <li class="img-wrapper"><img src="m1.jpg" alt=""></li>
        </ul>
        <a href="javascript:void(0)" class="to-img to-pre" onclick="goNext()"><</a>
        <a href="javascript:void(0)" class="to-img to-next" onclick="goNext(true)">></a>
        <ul class="point-wrapper">
            <li class="point active"></li>
            <li class="point"></li>
            <li class="point"></li>
            <li class="point"></li>
            <li class="point"></li>
        </ul>
    </div>
    <script>
        var toPre = document.querySelector('.to-pre');
        var toNext = document.querySelector('.to-next');
        var ulEl = document.querySelector('.wrapper-all');
        var liEls = document.querySelectorAll('.img-wrapper');
        var points = document.querySelectorAll('.point');
        // 全局图片计数器
        count = 1;
        // 全局目的地
        var target = 0;
        
        // 给小点添加点击事件
        for (var i = 0; i < points.length; i++) {

            ;(function (i) {
                points[i].addEventListener('click', function () {
                    count = i + 1;
                    target = -count * liEls[0].offsetWidth;
                    // 改变小点颜色
                    toPoint(this);
                    // 输入目标元素  目的地 来动画
                    move(ulEl, target);
                }) 
            })(i)
        }
        // 小点变红 输入目标小点
        function toPoint(el) {
            // 找到
            var wonPoint = document.querySelector('.active');
            // 删除
            wonPoint.classList.remove('active');
            // 添加
            el.classList.add('active');
        }

        // 左右切换  并且配合小点联动
        function goNext(isNext) {

            if (isNext) {
                count++;
                // 结尾跳到开头 使用 lastMove 针对首位的特殊切换函数
                if (count === liEls.length - 1) {
                    target = -count * liEls[0].offsetWidth;
                    lastMove(ulEl, target, true);
                    // 小红点变化
                    toPoint(points[count - 1]);
                    return
                }
            } else {
                count--;
                // 开头跳到结尾 使用 lastMove 针对首位的特殊切换函数
                if (count < 1) {
                    target = -count * liEls[0].offsetWidth;
                    lastMove(ulEl, target);
                    // 小红点变化
                    toPoint(points[count - 1]);
                    return
                }
            }
            
            target = -count * liEls[0].offsetWidth;
            move(ulEl, target);
            //改变 目标图片 对应小点的颜色
            toPoint(points[count - 1]);
            // if (count === liEls.length || count === 0) {
            //     console.log(count);
            //     goFast(ulEl, target);
            // } else {
            //     move(ulEl, target);
            // }
        }


        // 之前写的api 输入目标元素el 目的位置 即可完成缓动动画
        function move(el, target) {
            // 执行定时器之前， 清除老的定时器
            clearInterval(el.timer);
            // 满足current target相等 直接停止
            if (el.offsetLeft === target) return;

            el.timer = setInterval(function () {
                // 获取当前位置 offsetLeft只取整数
                var current = el.offsetLeft;
                // 设置步长
                var step = (target - current) / 10;
                if (Math.abs(step) < 1) {
                    step = step > 0 ? 1 : -1;
                }
                // 移动起来
                current += step;
                el.style.left = current + 'px';
                // 设置停止
                if (current === target) {
                    console.log('count');
                    clearInterval(el.timer)
                }
                
            }, 17)

        }

        // 图片首尾衔接如何移动
        function lastMove(el, target, isFinally) {
            // 执行定时器之前， 清除老的定时器
            clearInterval(el.timer);
            // 由isFinally判断（最后到第一个，或者反过来）
            count = isFinally ? 1 : (liEls.length-2);
            
            el.timer = setInterval(function () {
                // 获取当前位置 offsetLeft只取整数
                var current = el.offsetLeft;
                console.log(current);
                // 设置步长
                var step = (target - current) / 10;
                if (Math.abs(step) < 1) {
                    step = step > 0 ? 1 : -1;
                }
                // 移动起来
                current += step;
                el.style.left = current + 'px';
                // 设置停止
                if (current === target) {
                    target = -count * liEls[0].offsetWidth;
                    // console.log(target, count);
                    goFast(ulEl, target);
                    clearInterval(el.timer)
                }
                
            }, 17)
        }

        // 闪现动画
        function goFast(el, target) {
            el.style.left = target + 'px';
        }
    </script>
</body>
</html>